<template>
    <p id="myp">{{ msg }}</p>
    <ul>
        <li id="myli" v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <button @click="arr.push('5')">点击末尾追加</button>
</template>
<script>
export default {
    data() {
        return {
            msg: 'vue的生命周期钩子',
            timer: null,
            arr:[1,2,3,4]
        }
    },
    beforeCreate() { 
        console.log('beforeCreate 创建前执行，此时组件的data和methods都不可用');
        console.log(this.msg);
        
    },
    created() { 
        console.log('created 初始化完成后执行，此时组件的data和methods都可用');
        console.log(this.msg);
        this.timer= setInterval(() => {
            // this.msg += '已执行!'
            console.log("哇哈哈");
            
        }, 1000)
    },
    beforeMount() {
        console.log('beforeMount挂载前已被执行')
        console.log(document.getElementById('myp'))
        this.msg="哈哈哈"
    },
    mounted() {
       console.log('mounted挂载后执行，此时组件已经渲染完成')
       console.log(document.getElementById('myp'));
        console.log(document.querySelectorAll('#myli'));
       
    },
    beforeUpdate() { 
        console.log('beforeUpdate 更新前执行，此时组件的data和methods都可用');
        console.log(document.querySelectorAll('#myli')[4]);
    },
    updated() { 
        console.log('updated 更新后执行，此时组件的data和methods都可用');

        console.log(document.querySelectorAll('#myli')[4]);
    },
    beforeUnmount() { 
        console.log("销毁前被执行。。。。。");
        clearInterval(this.timer);
    },
    unmounted() { 
        console.log("销毁后被执行。。。。。");
    },
}

</script>